<template>
  <div>
    日历控件 fullcalendar<br />
    <FullCalendar :options="calendarOptions" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import "@fullcalendar/core/vdom"; // solves problem with Vite
import FullCalendar from "@fullcalendar/vue3";
import dayGridPlugin from "@fullcalendar/daygrid";
import interactionPlugin from "@fullcalendar/interaction";

const handleDateClick = (info) => {
  info.jsEvent.preventDefault(); //冒泡处理
  console.log("Date--------", info.event);
};

const handleEventClick = (info) => {
  info.jsEvent.preventDefault(); //冒泡处理
  console.log("Event--------", info.event);
};

const calendarOptions = ref({
  plugins: [dayGridPlugin, interactionPlugin],
  initialView: "dayGridMonth",
  dateClick: handleDateClick,
  eventClick: handleEventClick,
  eventRender: function (eventObj, $el) {},
  events: [
    {
      title: "event 1",
      start: "2022-07-01",
      end: "2022-07-20",
      backgroundColor: "#378006",
    },
    { title: "event 2", date: "2022-07-02" },
    {
      id: 1,
      title: "可以拖的",
      date: "2022-07-05",
      editable: true,
      backgroundColor: "#FF6666",
    },
    {
      id: 2,
      title: "这个地方就是一段文字了",
      date: "2022-07-05",
      className: "testClass",
      backgroundColor: "#66666600",
      borderColor: "#66666600",
      dragOpacity: 0.5,
      textColor: "black",
    },
  ],
});
</script>

<style>
.testClass {
  text-align: right;
}
</style>
